import { Card, List } from 'antd';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import React from 'react';

import useStyles from './index.style';

dayjs.extend(relativeTime);
const Projects: React.FC = () => {
  const { styles } = useStyles();

  const listData: any = [
    {
      title: '2025年度旅行目的地推荐',
      cover: 'https://picsum.photos/id/10/800/450', // 旅行风景封面
      subDescription: '全球10个小众宝藏地点，避开人潮享受静谧',
      cardItemContent:
        '涵盖北欧极光观测点、东南亚隐秘海岛、南美雨林探险路线，附最佳旅行季节和签证攻略...',
      modifyTime: '2025-08-05 10:20:30',
    },
    {
      title: '零基础学烘焙：入门到精通指南',
      cover: 'https://picsum.photos/id/292/800/450', // 烘焙美食封面
      subDescription: '从工具选择到配方比例，30天掌握戚风蛋糕、曲奇等基础甜点',
      cardItemContent:
        '详解烤箱温度控制技巧，常见失败原因分析（如蛋糕塌陷、饼干过硬），附家庭简易版配方...',
      modifyTime: '2025-08-04 16:45:12',
    },
    {
      title: '极简主义家居收纳方案',
      cover: 'https://picsum.photos/id/116/800/450', // 家居收纳封面
      subDescription: '小户型也能变大的5个空间魔法，告别杂乱无章',
      cardItemContent:
        '玄关鞋架设计、衣柜分区收纳、厨房抽屉分类法，附低成本改造清单（均价不超过50元）...',
      modifyTime: '2025-08-03 09:18:55',
    },
    {
      title: '经典电影台词背后的故事',
      cover: 'https://picsum.photos/id/96/800/450', // 电影场景封面
      subDescription: '《肖申克的救赎》《教父》等10部影片的台词创作秘闻',
      cardItemContent:
        '解析「希望是个好东西」的拍摄现场，马龙·白兰度如何即兴修改《教父》经典台词...',
      modifyTime: '2025-08-02 21:30:08',
    },
    {
      title: '办公室久坐族健身指南',
      cover: 'https://picsum.photos/id/176/800/450', // 健身动作封面
      subDescription: '每小时5分钟，缓解肩颈酸痛、预防腰椎问题',
      cardItemContent:
        '椅子椅子上即可完成的拉伸动作，鼠标手康复训练，推荐适合办公室的迷你健身器材（折叠瑜伽垫、弹力带）...',
      modifyTime: '2025-08-01 14:22:17',
    },
  ];

  return (
    <List
      className={styles.coverCardList}
      rowKey="id"
      grid={{
        gutter: 24,
        xxl: 3,
        xl: 2,
        lg: 2,
        md: 2,
        sm: 2,
        xs: 1,
      }}
      dataSource={listData}
      renderItem={(item: any) => (
        <List.Item>
          <Card className={styles.card} hoverable cover={<img alt={item.title} src={item.cover} />}>
            <Card.Meta title={<a>{item.title}</a>} description={item.subDescription} />
            <div className={styles.cardItemContent}>
              <span>{dayjs(item.modifyTime).fromNow()}</span>
            </div>
          </Card>
        </List.Item>
      )}
    />
  );
};
export default Projects;
